<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">系统基础配置</div>
      <div class="ele-page-desc">
        用于系统基础展示等场景。
      </div>
    </div>
    <div class="ele-body" style="padding-bottom: 71px">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="130px"
        @keyup.enter.native="submit"
        @submit.native.prevent
      >
        <el-card shadow="never" header="基础配置" body-style="padding: 22px 22px 0 22px;">
          <el-row :gutter="15" class="flex-wrap">
            <el-col :lg="6" :md="10" >
              <el-form-item label="浏览器图标:" prop="browserIcon">
                <span slot="label">
                  浏览器图标
                  <el-tooltip placement="top">
                    <div slot="content">
                        用于打开网站时浏览器标签页图标展示<br/>
                        大小尺寸为100px * 100px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>

                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button" @click="modalPicTap('dan','browserIcon','浏览器图标')">
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">

                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div class="ele-image-upload-item" style="margin:0 0 0 0;" v-if="form.browserIcon">
                          <div class="el-image" >
                            <img :src="form.browserIcon" width="100%" height="100%"  class="el-image__inner" style="object-fit: cover;">
                          </div>
                          <div class="ele-image-upload-close" @click="handleRemove('browserIcon')"><i class="el-icon-close"></i></div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :lg="6" :md="10">
              <el-form-item label="系统图标:" prop="systemIcon">
                <span slot="label">
                  系统图标
                  <el-tooltip placement="top">
                    <div slot="content">
                        系统左侧LOGO展示<br/>
                        大小尺寸为100px * 100px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!-- <ele-image-upload v-model="form.systemIcon" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" /> -->
                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button" @click="modalPicTap('dan','systemIcon','系统图标')">
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">

                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div class="ele-image-upload-item" style="margin:0 0 0 0;" v-if="form.systemIcon">
                          <div class="el-image" >
                            <img :src="form.systemIcon" width="100%" height="100%"  class="el-image__inner" style="object-fit: cover;">
                          </div>
                          <div class="ele-image-upload-close" @click="handleRemove('systemIcon')"><i class="el-icon-close"></i></div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :lg="8" :md="12">
              <el-form-item label="系统名称:" label-width="130px" prop="systemName">
                <el-input v-model="form.systemName" placeholder="请输入系统名称" clearable></el-input>
              </el-form-item>
              <el-form-item label="备案号:" label-width="130px" prop="theRecord">
                <el-input v-model="form.theRecord" placeholder="请输入备案号" clearable></el-input>
              </el-form-item>
              <el-form-item label="京公网备案号:" label-width="130px" prop="forTheRecord">
                <el-input v-model="form.forTheRecord" placeholder="请输入京公网备案号" clearable></el-input>
              </el-form-item>
              <el-form-item label="版权信息:" label-width="130px" prop="versionInformation">
                <el-input v-model="form.versionInformation" placeholder="请输入版权信息" clearable/>
              </el-form-item>
            </el-col>
            <!--<el-col :lg="8" :md="12">
              <el-form-item label="系统名称:" label-width="130px" prop="systemName">
                <el-input v-model="form.systemName" placeholder="请输入系统名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12">
              <el-form-item label="备案号:" label-width="130px" prop="theRecord">
                <el-input v-model="form.theRecord" placeholder="请输入备案号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12">
              <el-form-item label="京公网备案号:" label-width="130px" prop="forTheRecord">
                <el-input v-model="form.forTheRecord" placeholder="请输入京公网备案号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12">
              <el-form-item label="版权信息:" label-width="130px" prop="versionInformation">
                <el-input v-model="form.versionInformation" placeholder="请输入版权信息" clearable/>
              </el-form-item>
            </el-col>-->
          </el-row>
        </el-card>


        <el-card shadow="never" header="LOG配置" body-style="padding: 22px 22px 0 22px;">
          <el-row :gutter="15">
            <el-col :lg="6" :md="10">
              <el-form-item label="登录背景图:" prop="loginBackground">
                <span slot="label">
                  登录背景图
                  <el-tooltip placement="top">
                    <div slot="content">
                        用于登录时的背景图片选择<br/>
                        大小尺寸为1920px * 1080px
                        <!--大小尺寸跟分辨率同比例-->
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!--<ele-image-upload  v-model="form.loginBackground" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" />-->
                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button" @click="modalPicTap('dan','loginBackground','登录背景图')">
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">

                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div class="ele-image-upload-item" style="margin:0 0 0 0;" v-if="form.loginBackground">
                          <div class="el-image" >
                            <img :src="form.loginBackground" width="100%" height="100%"  class="el-image__inner" style="object-fit: cover;">
                          </div>
                          <div class="ele-image-upload-close" @click="handleRemove('loginBackground')"><i class="el-icon-close"></i></div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>




            <el-col :lg="6" :md="10">
              <el-form-item label="登录左侧图标:" prop="loginLeftIcon">
                <span slot="label">
                  登录左侧图标
                  <el-tooltip placement="top">
                    <div slot="content">
                        登录页左侧展示<br/>
                        大小尺寸为510px * 420px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!-- <ele-image-upload v-model="form.systemIcon" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" /> -->
                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button" @click="modalPicTap('dan','loginLeftIcon','登录左侧图标')">
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">

                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div class="ele-image-upload-item" style="margin:0 0 0 0;" v-if="form.loginLeftIcon">
                          <div class="el-image" >
                            <img :src="form.loginLeftIcon" width="100%" height="100%"  class="el-image__inner" style="object-fit: cover;">
                          </div>
                          <div class="ele-image-upload-close" @click="handleRemove('loginLeftIcon')"><i class="el-icon-close"></i></div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>


            <el-col :lg="6" :md="10">
              <!--移动端oem二级代理LOGO图-->
              <el-form-item label="LOGO图" prop="loginLeftIcon">
                <span slot="label">
                  移动端首页上方LOGO图
                  <el-tooltip placement="top">
                    <div slot="content">
                        移动端首页上方LOGO图<br/>
                        大小尺寸为716px * 272px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!-- <ele-image-upload v-model="form.systemIcon" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" /> -->
                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button" @click="modalPicTap('dan','logoDiagram','LOGO图')">
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">

                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>


                        <div class="ele-image-upload-item" style="margin:0 0 0 0;" v-if="form.logoDiagram">
                          <div class="el-image" >
                            <img :src="form.logoDiagram" width="100%" height="100%"  class="el-image__inner" style="object-fit: cover;">
                          </div>
                          <div class="ele-image-upload-close" @click="handleRemove('logoDiagram')"><i class="el-icon-close"></i></div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :lg="6" :md="10">
              <!--移动端oem二级代理系统昵称-->
              <el-form-item class="set-class" label="系统昵称:" prop="secondaryAgentName">
                <el-input style="margin-left: 60px;width: 80%;" v-model="form.secondaryAgentName" placeholder="请输入系统昵称" clearable>
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>
        </el-card>

        <el-card shadow="never" header="客服配置" body-style="padding: 22px 22px 0 22px;">
          <el-row :gutter="15">
            <el-col :lg="10" :md="8">
              <el-form-item label="客服二维码:" prop="serviceQrCode">
                <span slot="label">
                  客服二维码
                  <el-tooltip placement="top">
                    <div slot="content">
                        用于登录时底部客服二维码展示<br/>
                        大小尺寸为100px * 100px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!--<ele-image-upload v-model="form.serviceQrCode" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" />-->
                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button" @click="modalPicTap('dan','serviceQrCode','客服二维码')">
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div class="ele-image-upload-item" style="margin:0 0 0 0;" v-if="form.serviceQrCode">
                          <div class="el-image" >
                            <img :src="form.serviceQrCode" width="100%" height="100%"  class="el-image__inner" style="object-fit: cover;">
                          </div>
                          <div class="ele-image-upload-close" @click="handleRemove('serviceQrCode')"><i class="el-icon-close"></i></div>
                        </div>

                      </div>

                    </div>
                  </div>
                </div>

              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12">
              <el-form-item label="手机号" prop="phone">
                <el-input maxlength="11" v-model="form.phone" placeholder="请输入手机号" clearable/>
              </el-form-item>
            </el-col>

            <el-col :lg="8" :md="12">
              <el-form-item label="邮箱:" prop="mailbox">
                <el-input v-model="form.mailbox" placeholder="请输入" clearable>
                  <template v-slot:append>.com</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12">
              <el-form-item label="地址:" prop="address">
                <el-input v-model="form.address" placeholder="请输入地址" clearable/>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12">
              <el-form-item label="上班时间:" prop="attendanceTime">
                <el-input v-model="form.attendanceTime" placeholder="请输入上班时间描述" clearable/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="never" header="能力配置" body-style="padding: 22px 22px 0 22px;">
          <el-row :gutter="15">
            <el-col :lg="14" :md="12">
              <el-form-item label="发布:" prop="serviceQrCode">
                <!-- :min="1" :max="2"-->
                <el-checkbox-group v-model="checkList" :min="1" :max="2" @change="checkClick">
                  <el-checkbox label="代发布到D音(video.create.bind)"></el-checkbox>
                  <!--                  <el-checkbox label="代员工发布到D音"></el-checkbox>-->
                  <!--<el-checkbox label="D音cookie发布"></el-checkbox>-->
                  <!--                  <el-checkbox label="D音H5任务发布" disabled></el-checkbox>-->
                  <el-checkbox label="D音H5发布" disabled></el-checkbox>
                </el-checkbox-group>
                <div style="font-size: 14px;color: #606266">描述：请确定D音开放平台已获得代发布权限如果未获得将勿勾选，未获得权限程序将无法使用代用户发布相关的功能。</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="never" header="能力名称" body-style="padding: 22px 22px 0 22px;">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="能力选择:">
                <!-- :min="1" :max="2"-->
                <el-checkbox-group v-model="checkSelList" @change="checkSelClick" class="flex-align-center">
                  <div class="flex-columns" style="width: 50%;">
                    <el-checkbox label="授权动态续期(renew_refresh_token)"></el-checkbox><div style="font-size: 14px;color: #606266">描述：refresh_token支持动态续期，每次续期+30天，续期次数上限为5次 </div>
                  </div>
                  <div class="flex-columns" style="width: 50%;">
                    <el-checkbox label="管理视频评论(item.comment)"></el-checkbox><div style="font-size: 14px;color: #606266">描述：获取并管理评论  </div>
                  </div>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!--上传图片组件-->
        <uploadPictures
          ref="upload"
          :isChoice="isChoice"
          :visible.sync="modalPic"
          @getPic="getPic"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          :title="modalTitle"
        ></uploadPictures>

        <!--上传图片组件-->
        <uploadPictures
          ref="upload"
          :isChoice="isChoice"
          :visible.sync="modalPic"
          @getPic="getPic"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          :title="modalTitle"
        ></uploadPictures>

        <!-- 底部工具栏 -->
        <div class="ele-bottom-tool">
          <div v-if="validMsg" class="ele-text-danger">
            <i class="el-icon-circle-close"></i>
            <span>{{ validMsg }}</span>
          </div>
          <div class="ele-bottom-tool-actions">
            <el-button type="primary" :loading="loading" @click="submit">
              提交
            </el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>

</template>

<script>
  // import uploadPictures from "@/components/uploadPictures";
  import uploadPictures from "./components/uploadImg";
  import { save ,query } from '@/api/agent/pointAllocation';
  const DEFAULT_FORM = {
    // oemId: this.$store.state.user.info.oemId,
    // systemIcon: [],
    // site_name:'',
    // browserIcon:[],
    // site_copyright:'',
    // site_beian:'',
    // site_jingbeian:'',
    // loginBackground: [],
    // loginLeftIcon:[],
    // kf_date:'',
    // serviceQrCode:[],
    // kf_mailbox:'',
    // kf_phone:'',
    // kf_address:'',
  };
  import  EleImageUpload from 'ele-admin/es/ele-image-upload';
  import request from '@/utils/request';
  export default {
    name: 'FormAdvanced',
    components: { EleImageUpload,uploadPictures },
    data() {
      return {
        // 复选框
        checkList: ['D音H5发布'],
        // 能力名称——能力选择——复选框
        checkSelList:[],
        modalTitle:'',
        modalPic: false,
        isChoice: "单选",
        gridBtn: {
          xl: 4,
          lg: 8,
          md: 8,
          sm: 8,
          xs: 8,
        },
        gridPic: {
          xl: 6,
          lg: 8,
          md: 12,
          sm: 12,
          xs: 12,
        },
        // 表单提交状态
        loading: false,
        // 表单数据
        form: {
          oemId: this.$store.state.user.info.oemId
        },
        // 表单验证规则
        rules: {
          name: [
            {
              required: true,
              message: '请输入仓库名',
              trigger: 'blur'
            }
          ],
          url: [
            {
              required: true,
              message: '请输入仓库域名',
              trigger: 'blur'
            }
          ],
          datetime: [
            {
              required: true,
              message: '请选择生效日期',
              trigger: 'blur'
            }
          ],
          administrator: [
            {
              required: true,
              message: '请选择仓库管理员',
              trigger: 'blur'
            }
          ],
          approver: [
            {
              required: true,
              message: '请选择审批人',
              trigger: 'blur'
            }
          ],
          type: [
            {
              required: true,
              message: '请选择仓库类型',
              trigger: 'blur'
            }
          ],
          task: [
            {
              required: true,
              message: '请输入任务名',
              trigger: 'blur'
            }
          ],
          description: [
            {
              required: true,
              message: '请输入任务表述',
              trigger: 'blur'
            }
          ],
          executor: [
            {
              required: true,
              message: '请选择执行人',
              trigger: 'blur'
            }
          ],
          officer: [
            {
              required: true,
              message: '请选择责任人',
              trigger: 'blur'
            }
          ],
          reminder: [
            {
              required: true,
              message: '请选择提醒时间',
              trigger: 'blur'
            }
          ],
          taskType: [
            {
              required: true,
              message: '请选择任务类型',
              trigger: 'blur'
            }
          ]
        },
        // 表单验证信息
        validMsg: '',
        checkAll:[],
        checkSelAll:[]
      };
    },
    mounted() {
      this.querys()
    },
    methods: {
      querys(){
        // 查询回显
        query({
          oemId:this.$store.state.user.info.oemId,
        }).then((msg) => {
          if(msg.data != null){
            this.form = msg.data;
            //（1.开启 2.发布）
            if(this.form.toCookieReleased==1){
              this.checkList.push('D音cookie发布')
              console.log('D音cookie发布.form333========',this.form)
            }
            if(this.form.toBeReleased==1){
              this.checkList.push('代发布到D音(video.create.bind)')
              // this.checkList.push('代员工发布到D音')
              console.log("代员工发布到D音333",this.checkList)
            }
            if(this.form.videoComments==1){
              this.checkSelList.push('管理视频评论(item.comment)')
              console.log('管理视频评论(item.comment).form333========',this.form)
            }
            if(this.form.refreshToken==1){
              this.checkSelList.push('授权动态续期(renew_refresh_token)')
              console.log("授权动态续期(renew_refresh_token)",this.checkSelList)
            }
          }
        })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },
      checkClick(e){
        console.log("e=====",e)
        this.checkAll=e
      },
      checkSelClick(e){
        console.log("e=====",e)
        this.checkSelAll=e
      },
      // 选择图片
      modalPicTap(tit, picTit,openTitle) {
        this.modalTitle = openTitle;
        this.isChoice = tit === "dan" ? "单选" : "多选";
        this.picTit = picTit;
        this.modalPic = true;
        this.$nextTick(() => {
          this.$refs['upload'].show()
        })
      },
      // 选中图片
      getPic(pc) {
        console.log("pc========",pc)
        switch (this.picTit) {
          case "systemIcon":
            this.form.systemIcon = pc.imgUrl;
            break;
          case "loginBackground":
            this.form.loginBackground = pc.imgUrl;
            break;
          case "browserIcon":
            this.form.browserIcon = pc.imgUrl;
            break;
          case "serviceQrCode":
            this.form.serviceQrCode = pc.imgUrl;
            break;
          case "loginLeftIcon":
            this.form.loginLeftIcon = pc.imgUrl;
            break;
          case "logoDiagram":
            this.form.logoDiagram = pc.imgUrl;
            break;


        }
        this.modalPic = false;
      },
      //删除图片
      handleRemove(field) {
        this.form[field] = '';
      },
      /* 表单提交 */
      submit() {
        this.$refs['form'].validate((valid, obj) => {
          if (valid) {
            // 手机号验证
            if(this.form.phone && this.$sun.checkModbile(this.form.phone)==false){
              this.$message.error('手机号码格式不正确！');
              return
            }
            // 邮箱验证
            if(this.form.mailbox && this.$sun.checkEmail(this.form.mailbox+'.com')==false){
              this.$message.error('邮箱格式不正确！');
              return
            }
            console.log('this.checkAll',this.checkAl,'this.checkAll[1]',this.checkAll[1],this.checkAll[1]=='D音cookie发布')


            if(this.checkAll[1]=='D音cookie发布'){
              //（1.开启 2.发布）
              this.form.toCookieReleased=1

              if(this.form.toBeReleased){
                delete this.form.toBeReleased
              }
              console.log('D音cookie发布.form========',this.form)

            }
            // if(this.checkAll[1]=='代员工发布到D音'){
            if(this.checkAll[1]=='代发布到D音(video.create.bind)'){
              console.log("代发布到D音(video.create.bind)")
              this.form.toBeReleased=1

              if(this.form.toCookieReleased){
                delete this.form.toCookieReleased
              }
            }

            if(this.checkSelAll.indexOf('授权动态续期(renew_refresh_token)') != -1){
              this.form.refreshToken=1
            }
            if(this.checkSelAll.indexOf('管理视频评论(item.comment)') != -1){
              this.form.videoComments=1
            }
            this.validMsg = '';
            this.loading = true;
            console.log('this.checkAll[1]==\'D音cookie发布\'',this.form)
            const data = {
              ...this.form
            };
            save(data).then((msg) => {
              this.loading = false;
              // id 不存在则调用查询是否已保存，否则保存多次都会不传id
              // if(!this.form.id){
              this.querys()
              // }
              this.$message.success('提交成功！');
            }).catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
          } else {
            this.validMsg = ` 共有校验 ${Object.keys(obj).length} 项不通过`;
            return false;
          }
        });
      },
      onUpload(item){
        console.log('item:', item);
        item.status = 'uploading';
        const formData = new FormData();
        formData.append('file', item.file);
        request({
          url: '/common/uploadFile',
          method: 'post',
          data: formData,
          onUploadProgress: (e) => {  // 文件上传进度回调
            if (e.lengthComputable) {
              item.progress = e.loaded / e.total * 100;
            }
          }
        }).then((res) => {
          if(res.data.code === 0) {
            item.status = 'done';
            item.url = res.data.data.url;
            // 如果你上传的不是图片格式, 建议将 url 字段作为缩略图, 再添加其它字段作为最后提交数据
            //item.url = res.data.data.thumbnail;  // 也可以不赋值 url 字段, 默认会显示为一个文件图标
            item.fileUrl = res.data.data.url;
          }
        }).catch((e) => {
          item.status = 'exception';
        });
      }
    }
  };
</script>
